<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">考试</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <div class="examStartSoon">即将开始：{{examStartSoon}}</div> -->
    <div class="content">
      <el-tabs class="tabs" :tab-position="tabPosition" v-model="statusNow" @tab-click="changeStatus">
        <el-tab-pane
          v-for="item in status"
          :key="item"
          :label="item"
          :name="item"
          lazy
        >
          <div class="cards">
            <div v-for="item in exams" :key="item" @click="goToExam(item)">
              <el-card class="box-card" v-if="item.status==statusNow">
                <div class="title">{{ item.name }}</div>
                <div class="type">开始时间：{{ item.startTime }}</div>
                <div class="type">结束时间：{{ item.endTime }}</div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { examSearch } from '../../../api/students.js'
export default {
  name: 'ExamManage',
  data () {
    return {
      addDialogVisible: false,
      tabPosition: 'left',
      examName: '',
      examStartSoon: '计算机网络2019期末考试',
      statusNow: '进行中',
      status: [
        '进行中',
        '未开始',
        '已结束'
      ],
      OngoingExams: [],
      FinishedExams: [],
      NotStartExams: [],
      exams: []
    }
  },
  mounted () {
    this.getAllSubjects()
    this.getExams()
    this.changeStatus()
  },
  methods: {
    getAllSubjects () {
      console.log('statusnow')
      console.log(this.statusNow)
    },
    // 修改状态
    changeStatus () {
      console.log('status')
      // this.getExams()
      if (this.statusNow === '进行中') this.exams = this.OngoingExams
      if (this.statusNow === '未开始') this.exams = this.NotStartExams
      if (this.statusNow === '已结束') this.exams = this.FinishedExams
      console.log(this.exams)
    },
    // 状态对应的考试列表
    getExams () {
      examSearch().then(res => {
        var temp = res.data.data.list
        console.log('temp')
        console.log(temp)
        // eslint-disable-next-line
        if (temp.length != 0) {
          for (var item of temp) {
            console.log(item)
            if (item.status === '未开始') this.NotStartExams.push(item)
            if (item.status === '进行中') this.OngoingExams.push(item)
            if (item.status === '已结束') this.FinishedExams.push(item)
          }
        }
      })
    },
    // 跳转详情
    goToExam (item) {
      this.$router.push({path: '/student/ExamInfo', query: {id: item.id}})
    },
    // 格式化日期
    formatDate (time, fmt) {
      const day = ['日', '一', '二', '三', '四', '五', '六']
      const o = {
        'M+': time.getMonth() + 1, // 月份
        'd+': time.getDate(), // 日
        'h+': time.getHours(), // 小时
        'm+': time.getMinutes(), // 分
        's+': time.getSeconds(), // 秒
        'q+': Math.floor((time.getMonth() + 3) / 3), // 季度
        'S+': time.getMilliseconds(), // 毫秒
        'D': time.getDay() // 星期
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (time.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          const args = (k === 'S+') ? '000' : '00'
          let v = (args + o[k]).substr(('' + o[k]).length)
          if (k === 'D') {
            v = day[parseInt(v)]
          }
          fmt = fmt.replace(RegExp.$1, v)
        }
      }
      return fmt
    }
  }
}
</script>

<style scoped>
  .content {
    padding: 15px;
    height: calc(100% - 60px);
    width: calc(100% - 30px);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .breadcrumb {
    padding: 20px;
  }
  .box-card {
    width: 220px;
    margin: 10px 10px 30px;
    box-shadow:0 0 8px rgba(98, 98, 98, 0.5);
  }
  .box-card:hover{
    transform: scale(1.02);
    box-shadow:0 0 10px rgba(117, 179, 255, 0.7);
  }
  .title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 18px;
    text-align: left;
    padding-bottom: 10px;
    border-bottom: solid 1px rgba(117, 179, 255, 0.7);
  }
  .title:hover{
    font-size: 21px;
    cursor: pointer;
    color: #123456;
  }
  .type {
    font-size: 12px;
    margin-bottom: 10px;
    color: #555555;
    display: block;
  }
  .updateTime {
    float: right;
    font-size: 12px;
    color: #919698;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  .tabs {
    width: 90%;
  }
  /deep/ .el-tabs__nav {
    z-index: 0;
  }
  /deep/ .el-tabs--left .el-tabs__item.is-left {
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    border-radius: 20px 0 0 20px;
    width: 120px;
    margin-right: 0px;
  }

  /deep/ .el-tabs--left .el-tabs__item:hover {
    width: 130px;
    color: #004100;
    font-weight: bold;
    box-shadow: 0px 12px 8px -12px rgba(98, 98, 98, 0.5);
  }

  /deep/ .el-tabs--left .el-tabs__item.is-left.is-active {
    width: 130px;
    font-weight: bold;
    color: #004100;
    background-color: rgba(170, 255, 127, 0.4);
    box-shadow: 5px 12px 8px -10px rgba(98, 98, 98, 0.5);
    border: 2px solid rgba(11, 11, 55, 0.3);
  }

  /deep/ .el-tabs--left .el-tabs__active-bar {
    background-color: #123456;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 20px;
  }
  .examStartSoon {
    float: left;
    margin: 20px 60px;
    font-size: 21px;
    font-weight: bold;
  }
</style>
